<template>
<div class="mainos">
	<div class="main_spac1 paddingBottom5">
		<div class="main_white padding10 paddingBottom20">
		<div class="main_crumbs boxdq">
			<div class="main_crumbs_l">
				<a href="javascript:;" @click="$router.back(-1)">
				<i class="el-icon-arrow-down"></i>返回
				</a>
				<em>|</em>
				<span>查看订单</span>
			</div>
			<div class="main_crumbs_rt box">
				<div v-if="info.info.order_status != 4">
				<el-button
					v-repeatClick
					v-if="info.info.order_status == 2"
					@click="successClick"
					class="marginLeft5"
					>完成</el-button
				>
				<el-button v-repeatClick class="marginLeft5">打印</el-button>
				<el-button v-repeatClick @click="exportOrderiInfo"
					>导出</el-button
				>
				</div>
				<el-button
				v-repeatClick
				@click.stop="mainor_ex = true"
				class="marginLeft10"
				>表头设置</el-button
				>
			</div>
		</div>
		<div @click="mainor_ex = false">
			<div class="main_tile boxdq marginTop10">
				<div class="main_tile_l marginLeft0"><em></em>订单详情</div>
			</div>
			<div class="main_xq">
				<ul class="boxha">
				<li>
					订单号：<span>{{ info.info.order_sn }}</span>
				</li>
				<li>
					客户名称：<span>{{ info.info.company_name.company_name }}</span>
				</li>
				<li>
					收货人信息：<span>{{
						info.info.contact +
						" " +
						info.info.mobile +
						" " +
						info.info.address
					}}</span>
				</li>
				<li>
					下单日期：<span>{{
						parseTime(info.info.created_at, "{y}-{m}-{d}")
					}}</span>
				</li>
				<li>
					配送日期：<span
						>{{ parseTime(info.info.send_time, "{y}-{m}-{d}") }}
						{{
						info.info.send_time_id == 0
							? ""
							: info.send_time[info.info.send_time_id]
						}}</span
					>
				</li>
				<li>
					订单状态：<span>{{
						info.order_status[info.info.order_status]
					}}</span>
				</li>
				<li>
					支付状态：<span>{{ info.pay_type[info.info.pay_status] }}</span>
				</li>
				<li>
					实付金额：<span>{{ info.info.real_money }}</span>
				</li>
				<li>
					配送金额 ：<span>{{ info.info.send_money }}</span>
				</li>
				<li>
					订单来源：<span>{{ info.from[info.info.from] }}</span>
				</li>
				<li class="main_w100">
					订单备注：<span>{{ info.info.remark }}</span>
				</li>
				</ul>
			</div>
			<div class="main_tile boxdq marginTop10">
				<div class="main_tile_l marginLeft0"><em></em>商品详情</div>
				<div class="mainos_tile_r">合计：{{ total }}元</div>
			</div>
			<div class="main_table marginTop0">
				<el-table
				ref="multipleTable"
				v-loading="listLoading"
				:data="info.info.order_list"
				element-loading-text="加载中"
				fit
				highlight-current-row
				>
				<!-- <div v-for="(field, index) in info.field" :key="index"> -->
				<!-- v-if="field == 1" -->
				<el-table-column label="序号" prop="userId">
					<template slot-scope="scope">{{ scope.$index + 1 }}</template>
				</el-table-column>
				<el-table-column
					label="商品名称"
					width="150"
					prop="name"
					class-name="main_hei"
				>
					<template slot-scope="scope"
						>{{ scope.row.name }}【{{ scope.row.spu_name }}】</template
					>
				</el-table-column>
				<el-table-column label="单位" prop="unit" class-name="main_hei" />
				<el-table-column
					label="下单数量"
					width="150"
					prop="order_num"
					class-name="main_hei"
				/>
				<el-table-column
					label="下单单价"
					width="150"
					prop="order_price"
					class-name="main_hei"
				/>
				<el-table-column
					label="下单金额"
					width="150"
					class-name="main_hei"
				>
					<template slot-scope="scope">{{
						(scope.row.order_num * scope.row.order_price).toFixed(2)
					}}</template>
				</el-table-column>
				<el-table-column
					label="配送数量"
					width="150"
					prop="weight"
					class-name="main_hei"
				/>
				<el-table-column
					label="配送单价"
					width="150"
					prop="price"
					class-name="main_hei"
				/>
				<el-table-column
					label="配送金额"
					width="150"
					class-name="main_hei"
				>
					<template slot-scope="scope">{{
						(scope.row.weight * scope.row.price).toFixed(2)
					}}</template>
				</el-table-column>
				<!-- </div> -->
				<el-table-column
					label="备注"
					prop="remark"
					class-name="main_hei"
				/>
				</el-table>
			</div>
			<div class="main_tile boxdq marginTop20">
				<div class="main_tile_l marginLeft0"><em></em>生命周期</div>
			</div>
			<div class="main_table marginTop0">
				<el-table
				ref="multipleTable"
				v-loading="listLoading"
				:data="info.logs"
				element-loading-text="加载中"
				fit
				highlight-current-row
				>
				<el-table-column
					label="管理员"
					prop="admin.name"
					class-name="main_hei"
				/>
				<el-table-column
					label="操作"
					prop="operate.name"
					class-name="main_hei"
				/>
				<el-table-column
					label="内容"
					prop="content"
					class-name="main_hei"
				>
					<template slot-scope="scope">
						<div
						v-for="(content, index) in scope.row.content"
						:key="index"
						class="marginTop5 marginBottom5"
						>
						{{ content }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="IP" prop="ip" class-name="main_hei" />
				<el-table-column
					label="时间"
					prop="created_at"
					class-name="main_hei"
				>
					<template slot-scope="scope">{{
						parseTime(scope.row.created_at, "{y}-{m}-{d}")
					}}</template>
				</el-table-column>
				</el-table>
			</div>
		</div>
		</div>

		<!-- 表头设置 -->
		<div :class="[{ on: mainor_ex }, ' mainor_ex']">
		<div class="mainor_exb">
			<h3>表头设置</h3>
			<div class="mainor_exb_an">
				<el-checkbox-group v-model="type">
				<el-checkbox
					v-for="(Header, index) in Header"
					:key="index"
					:label="Header.id"
					:disabled="Header.disabled"
					>{{ Header.name }}</el-checkbox
				>
				</el-checkbox-group>
			</div>
		</div>
		<div class="mainor_exb_b">
			<el-button type="primary" @click="determine" v-repeatClick
				>确定</el-button
			>
			<el-button @click="recovery" v-repeatClick>恢复</el-button>
			<el-button @click="mainor_ex = false">取消</el-button>
		</div>
		</div>
	</div>
</div>
</template>

<script>
import {
order_info,
order_merge,
order_setOrderStatus,
order_info_detail,
} from "@/api/order/orderList";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime } from "@/utils/index";
import { field_save } from "@/api/currency";

export default {
computed: {
	total() {
		let sz = 0;
		this.info.info.order_list.forEach((e) => {
		sz += parseFloat(e.order_num * e.order_price);
		});
		return sz.toFixed(2);
	},
},
components: {},
data() {
	return {
		// 时间
		parseTime,
		// 基本信息
		info: {
		info: {
			from: 0,
			created_at: "2000-01-01",
			send_time: "2000-01-01",
			address: "",
			order_list: [],
			company_name: {
				company_name: "",
			},
			member: {
				mobile: "",
			},
		},
		send_time: ["05：00"],
		from: ["后台"],
		order_status: ["待审核"],
		pay_type: [],
		},
		listLoading: false,
		// id
		id: this.$route.params.id,
		// 表头设置
		mainor_ex: false,
		type: [],
		Header: [
		{
			id: 1,
			name: "序号",
			disabled: false,
		},
		{
			id: 2,
			name: "商品名称",
			disabled: false,
		},
		{
			id: 3,
			name: "单位",
			disabled: true,
		},
		{
			id: 4,
			name: "下单数量",
			disabled: true,
		},
		{
			id: 5,
			name: "下单单价",
			disabled: true,
		},
		{
			id: 6,
			name: "下单金额",
			disabled: true,
		},
		{
			id: 7,
			name: "配送数量",
			disabled: true,
		},
		{
			id: 8,
			name: "配送单价",
			disabled: true,
		},
		{
			id: 9,
			name: "配送金额",
			disabled: true,
		},
		{
			id: 10,
			name: "备注",
			disabled: true,
		},
		],
	};
},
created() {
	// 基本信息
	this.order_info();
},
methods: {
	// 基本信息
	order_info() {
		let data = Object.assign(
		{
			sign: Md5(
				objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
				apiUrl().appsecret
			),
		},
		apiUrl().name,
		{ id: this.id }
		);
		order_info(data).then((res) => {
		if (res.errcode == 0) {
			res.data.logs.map((e) => {
				if (e.content) {
				e.content = JSON.parse(e.content);
				}
			});
			this.type = res.data.field;
			this.info = res.data;
		} else {
			this.$message.error(res.errmsg);
		}
		});
	},
	// 订单导出
	exportOrderiInfo() {
		let data = Object.assign(
		{
			sign: Md5(
				objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
			),
		},
		apiUrl().name,
		{ id: this.id }
		);
		console.log(data);
		order_info_detail(data)
		.then((res) => {
			const link = document.createElement("a");
			let blob = new Blob([res], { type: "application/vnd.ms-excel" });
			link.style.display = "none";
			link.href = URL.createObjectURL(blob);
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		})
		.catch(() => {
			this.$message.error("导出失败");
		});
	},
	// 完成
	successClick() {
		this.$confirm("确认订单商户已完成签收?", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
		})
		.then(() => {
			let data = Object.assign(
				{
				sign: Md5(
					objKeySort(
						Object.assign(apiUrl().name, { id: this.id, status: 3 })
					) + apiUrl().appsecret
				),
				},
				apiUrl().name,
				{ id: this.id, status: 3 }
			);
			order_setOrderStatus(data).then((res) => {
				if (res.errcode == 0) {
				this.$message({
					message: "确认成功",
					type: "success",
				});
				this.order_info();
				} else {
				this.$message.error(res.errmsg);
				}
			});
		})
		.catch(() => {});
	},
	// 页面设置
	determine() {
		let arry = [];
		this.Header.map((e) => {
		this.type.map((p) => {
			if (e.id == p) {
				arry.push(e.id);
				return;
			}
		});
		});
		this.field_save(arry);
	},
	recovery() {
		this.field_save([
		1,
		2,
		3,
		4,
		5,
		6,
		7,
		8,
		9,
		10,
		11,
		12,
		13,
		14,
		15,
		16,
		17,
		]);
	},
	field_save(arry) {
		let data = Object.assign(
		{
			sign: Md5(
				objKeySort(Object.assign(apiUrl().name, { type: 6 })) +
				apiUrl().appsecret
			),
		},
		apiUrl().name,
		{ type: 6, fields: JSON.stringify(arry) }
		// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
		);
		field_save(data).then((res) => {
		if (res.errcode == 0) {
			this.$message({
				message: "设置成功",
				type: "success",
			});
			this.order_info();
			this.mainor_ex = false;
		} else {
			this.$message.error(res.errmsg);
		}
		});
	},
},
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainos {
.main_tile {
	.mainos_tile_r {
		color: $colour_red;
		font-size: $font_14;
	}
}
.mainor_ex {
	position: fixed;
	width: 220px;
	height: 100%;
	background: $white;
	box-shadow: 0 6px 10px rgba(0, 21, 41, 0.08);
	top: 0;
	right: 0;
	z-index: 9999;
	transition: all 0.5s;
	transform: translate3d(100%, 0, 0);
	&.on {
		transform: translate3d(0, 0, 0);
	}
	.mainor_exb {
		position: absolute;
		width: 100%;
		height: calc(100% - 60px);
		overflow-y: auto;
		h3 {
		font-size: $font_16;
		color: $colour_18;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid $colour_e6;
		padding-left: 20px;
		}
		.mainor_exb_an {
		padding-left: 20px;
		margin-top: 15px;
		/deep/.el-checkbox {
			display: block;
			margin-top: 15px;
			margin-bottom: 15px;
		}
		}
	}
	.mainor_exb_b {
		position: absolute;
		bottom: 0;
		width: 100%;
		border-top: 1px solid $colour_e6;
		height: 55px;
		text-align: center;
		/deep/.el-button--default {
		margin-top: 12px;
		border-color: $subActive;
		color: $menuText;
		&:hover {
			border-color: $menuActiveText;
			color: $menuActiveText;
		}
		}
	}
}
}
</style>
